<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>dynamicFooter</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <style>
            .deshabilitar{
                color: #444444 !important;
                cursor: default !important;
            }
            .title{
                background-color: #009999
            }
            a{
                color: #3333ff;
                text-decoration: none;
            }
            div{
                background-color: ghostwhite;
            }
            span{
                background-color: red;
            }
            img{
                margin-right: 5px;
                width: 16px;
                height: 16px;
            }
        </style>
        <script type="text/javascript">
            var storeId = GetURLParameter('storeId');
            if (typeof storeId === 'undefined') {
                storeId = "10152";
            }
            var storeIdXCountry;
            
            getStoreIdXCountry();

            function getStoreIdXCountry() {
                var xmlhttp = new XMLHttpRequest();
                var url = "json/countries.json";
                xmlhttp.onreadystatechange = function () {
                    if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
                        storeIdXCountry = JSON.parse(xmlhttp.responseText);
                        callbackstoreIdXCountry();
                    }
                };
                xmlhttp.open("GET", url, true);
                xmlhttp.send();
            }
            function callbackstoreIdXCountry() {
                console.log(storeIdXCountry);
                if (typeof (Storage) !== "undefined") {
                    if (!sessionStorage.footerContact || sessionStorage.storeId !== storeId) {
                        getFooterContactInfo();
                    } else {
                        $(function () {
                            setFooterContactInfo();
                        });
                    }
                }
            }
            function getFooterContactInfo() {
                for (var i in storeIdXCountry) {
                    console.log(i);
                    if (i === storeId) {
                        console.log(storeIdXCountry[i]);
                        sessionStorage.storeId = i;
                        var xmlhttp = new XMLHttpRequest();
                        var url = "json/" + storeIdXCountry[i];
                        xmlhttp.onreadystatechange = function () {
                            if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
                                var a = xmlhttp.responseText;
                                console.log(a);
                                sessionStorage.footerContact = a;
                                setFooterContactInfo();
                            }
                        };
                        xmlhttp.open("GET", url, true);
                        xmlhttp.send();
                        break;
                    }
                }
            }

            function setFooterContactInfo() {
                var footerContact = JSON.parse(sessionStorage.footerContact);
                console.log(footerContact);
                $("#portalCorporativo").attr("href", footerContact.portalCorporativo);
                $("#condicionesComerciales").attr("href", footerContact.enlacesInteres.condicionesComerciales);
                $("#terminosUso").attr("href", footerContact.enlacesInteres.terminosUso);
                if (footerContact.redesSociales.facebook !== "") {
                    $("#facebook").attr("href", footerContact.redesSociales.facebook);
                    $("#facebookImage").attr("src", "image/icon-social-fb-footer.png");
                } else {
                    $("#facebook").attr("class", "deshabilitar");
                    $("#facebook").attr("href", "javascript:void(0);");
                    $("#facebookImage").attr("src", "image/icon-fb-p.png");
                }
                if (footerContact.redesSociales.twitter !== "") {
                    $("#twitter").attr("href", footerContact.redesSociales.twitter);
                    $("#twitterImage").attr("src", "image/icon-social-tw-footer.png");
                } else {
                    $("#twitter").attr("class", "deshabilitar");
                    $("#twitter").attr("href", "javascript:void(0);");
                    $("#twitterImage").attr("src", "image/icon-tw-p.png");
                }
                if (footerContact.redesSociales.linkedin !== "") {
                    $("#linkedin").attr("href", footerContact.redesSociales.linkedin);
                    $("#linkedinImage").attr("src", "image/icon-social-in-footer.png");
                } else {
                    $("#linkedin").attr("class", "deshabilitar");
                    $("#linkedin").attr("href", "javascript:void(0);");
                    $("#linkedinImage").attr("src", "image/icon-in-p.png");
                }
                if (footerContact.redesSociales.youtube !== "") {
                    $("#youtube").attr("href", footerContact.redesSociales.youtube);
                    $("#youtubeImage").attr("src", "image/icon-social-yt-footer.png");
                } else {
                    $("#youtube").attr("class", "deshabilitar");
                    $("#youtube").attr("href", "javascript:void(0);");
                    $("#youtubeImage").attr("src", "image/icon-yt-p.png");
                }
                $("#puntoAtencion").attr("href", footerContact.contacto.puntosdeatencion);
                $("#telefono1").html(footerContact.contacto.telefono1);
                $("#telefono2").html(footerContact.contacto.telefono2);
                $("#soporte").attr("href", footerContact.contacto.correo);
            }

            function GetURLParameter(sParam) {
                var sPageURL = window.location.search.substring(1);
                var sURLVariables = sPageURL.split('&');
                for (var i = 0; i < sURLVariables.length; i++) {
                    var sParameterName = sURLVariables[i].split('=');
                    if (sParameterName[0] === sParam) {
                        return sParameterName[1];
                    }
                }
            }
        </script>
    </head>
    <body>
        <div>
            <div>
                <ul>  
                    <li>
                        <a href="javascript:void(0);" target="_blank" id="portalCorporativo" name="portalCorporativo">
                            Portal Corporativo
                        </a>
                    </li>
                </ul>
            </div>
            <div >
                <ul>  
                    <li>
                        <a href="javascript:void(0);" target="_blank" id="condicionesComerciales" name="condicionesComerciales">
                            Condiciones comerciales
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);" target="_blank" id="terminosUso" name="terminosUso">
                            Términos de Uso
                        </a>
                    </li>
                </ul>
            </div>
            <div >
                <ul>  
                    <li>
                        <span class="title">
                            REDES SOCIALES
                        </span>
                    </li>
                    <li>
                        <a href="javascript:void(0);" target="_blank" id="facebook" name="facebook">
                            <img src="" id="facebookImage" name="facebookImage">
                            Facebook
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);" target="_blank" id="twitter" name="twitter">
                            <img src="" id="twitterImage" name="twitterImage">
                            Twitter
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);" target="_blank" id="linkedin" name="linkedin">
                            <img src="" id="linkedinImage" name="linkedinImage">
                            LinkedIn
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);" target="_blank" id="youtube" name="youtube">
                            <img src="" id="youtubeImage" name="youtubeImage">
                            YouTube
                        </a>
                    </li>
                </ul>
            </div>
            <div>
                <ul>  
                    <li>
                        <span class="title">
                            CONTACTO
                        </span>
                    </li>
                    <li>
                        <a href="javascript:void(0);" target="_blank" id="puntoAtencion" name="puntoAtencion">
                            Puntos de Atención
                        </a>
                    </li>
                    <li>
                        <span id="telefono1" name="telefono1"></span>
                    </li>
                    <li>
                        <span id="telefono2" name="telefono2"></span>
                    </li>
                    <li>
                        <a href="javascript:void(0);" target="_blank" id="soporte" name="soporte">
                            soporte.web@nexsysla.com
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </body>
</html>
